<template>
    <div class="pb-[80px]">
        <div class="bg-white rounded-[4px]">
            <div class="p-[20px]">
                <div class="mb-[30px]">
                    <span class="text-[16px]">站点设置</span>
                </div>
                <a-form :model="formState" ref="formRef" :label-col="{ style: { width: '120px' } }">
                    <a-form-item label="站点名称" name="site_name" :rules="[{ required: true, message: '请输入网站名称' }]">
                        <a-input class="w-[300px]" v-model:value="formState.site_name" show-count :maxlength="20"
                            placeholder="请输入网站名称" />
                    </a-form-item>
                    <a-form-item label="站点LOGO" name="logo">
                        <upload-image v-model="formState.logo" />
                    </a-form-item>
                    <a-form-item label="网站域名" name="site_domain" :rules="[{ required: true, message: '请输入网站域名' }]"
                        extra="不带http/https网站地址">
                        <a-input class="w-[300px]" v-model:value="formState.site_domain" placeholder="请输入网站域名" />
                    </a-form-item>
                    <a-form-item label="关键字" name="keywords" extra="每个关键字用英文逗号隔开">
                        <a-input class="w-[300px]" v-model:value="formState.keywords" placeholder="请输入网站关键字" />
                    </a-form-item>
                    <a-form-item label="网站描述" name="site_desc">
                        <a-textarea class="w-[300px]" v-model:value="formState.site_desc" placeholder="请输入平台描述"
                            :rows="4" />
                    </a-form-item>
                    <a-form-item label="单位名称" name="company_name">
                        <a-input class="w-[300px]" v-model:value="formState.company_name" placeholder="请输入单位名称" />
                    </a-form-item>
                </a-form>
            </div>

        </div>
        <div
            class="fixed bottom-0 w-[100%] border-0 border-t-[1px] border-solid border-[#f2f2f2] bg-white flex justify-start  <lg:(w-full justify-center)  py-[20px]">
            <a-button class="mx-[140px]" type="primary" html-type="submit" @click="submitForm">确认保存</a-button>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import UploadImage from '@/components/upload-image/index.vue';

import { getSiteSetting, saveSiteSetting } from '@/utils/api/setting';

const formRef = ref();

const formState = reactive({
    key: 'site',
    site_name: '',
    logo: '',
    site_domain: '',
    keywords: '',
    site_desc: '',
    company_name: '',
})

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    // 获取默认配置
    getSiteSetting({ key: 'site' }).then((res: any) => {
        if (res.data) {
            formState.site_name = res.data.site_name;
            formState.logo = res.data.logo;
            formState.site_domain = res.data.site_domain;
            formState.keywords = res.data.keywords;
            formState.site_desc = res.data.site_desc;
            formState.company_name = res.data.company_name;
        }
    })
};

const submitForm = () => {
    console.log(formState)
    formRef.value
        .validate()
        .then(() => {
            saveSiteSetting(formState).then((res: any) => {
                if (res.code == 200) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
            })
        });
}
</script>